import SiderBase from '../layouts/sider';
import React, { Suspense, ReactNode, FC, useState } from 'react';
import { Layout, theme } from 'antd';
import HeaderBase from '../layouts/header';
import { IRouteComponentProps } from 'umi';
// import { useLocation } from "react-router-dom";

const LayoutBase = ({ children, location }: IRouteComponentProps) => {
  const [collapsed, setCollapsed] = useState(false);

  // 改变菜单栏展开收起的状态
  let changeCollapse = () => {
    setCollapsed(!collapsed);
  };
  // console.log(children)

  // 通过路径来判断  如果访问的是login页面 说明是不需要布局的
  // let location = useLocation()
  // console.log(location)
  // 如果访问的路径在排除列表中，就不需要布局
  if (location.pathname === '/login') {
    return <Suspense fallback>{children}</Suspense>;
  } else {
    return (
      <Layout>
        <SiderBase collapsed={collapsed} />
        <Layout className="site-layout">
          <HeaderBase collapsed={collapsed} changeCollapse={changeCollapse} />
          <Suspense fallback>{children}</Suspense>
        </Layout>
      </Layout>
    );
  }
};

export default LayoutBase;
